<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="/admin/qrcode/jq.js"></script>
        <script type="text/javascript" src="/admin/qrcode/bot.js" ></script>
        <link  rel="stylesheet" type="text/css" href="/admin/css/boot.css"></link>
        <link  rel="stylesheet" type="text/css" href="/admin/css/sl.css"></link>

        <link href="/admin/js/fileinput/css/fil.css" media="all" rel="stylesheet" type="text/css" />
        <script src="/admin/js/fileinput/js/put.js" type="text/javascript"></script>
        <script src="/admin/js/fileinput/js/zh.js" type="text/javascript"></script>
    </head>

    <body>
        <h2>上传或更新图片</h2>
        <form id="myForm" class="form-horizontal">
            <input name="pageNum" type="hidden"/>
            <input name="pageSize" type="hidden"/>
            <input name="teamId" type="hidden"/>
            <div class="form-group">
                <label class="col-sm-1 control-label">车型名称</label>
                <div class="col-sm-9">
                    <input name="autoName" type="text" disabled/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">现有车型图片</label>
                <div class="col-sm-9">
                    <img name="teamLogo"height="134px" width="200px" src="/assets/images/"/>
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-1 control-label">选择车型新图片</label>
                <div class="col-sm-3">
                    <input id="logo" name="logo"  type="file" required/>
                </div>
            </div>
        </form>
    </body>
</html>
<script>
    String.prototype.GetValue= function(para) {
        let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?")+1).match(reg);
        if (r!=null) return unescape(r[2]); return null;
    }

    function queryAndShowInfo(teamId){
        //查询车辆的名称和logo并回显到页面上
        $.ajax({
            type: "GET",
            url: "/Admin/queryName",
            data: {id:teamId},
            success: function (vo) {
                let obj=vo;
                let id=obj.id;
                let picture=obj.picture;
                let carName=obj.carName;
                $("input[name='autoName']").val(carName);
                if(teamLogo!=null){
                    $("img[name='teamLogo']").attr("src","/assets/images/carName/"+picture);
                }else{
                    $("img[name='teamLogo']").addClass("hidden");
                    $("img[name='teamLogo']").parent().html("还没有上传图片");
                }
            }
        });
    }

    $(function () {
        //从url中获取页码和size的参数值
        let url = document.location.toString();
        let pageNum=url.GetValue("pageNum");
        let pageSize=url.GetValue("pageSize");
        let teamId=url.GetValue("teamId");
        $("input[name='pageNum']").val(pageNum);
        $("input[name='pageSize']").val(pageSize);
        $("input[name='teamId']").val(teamId);
        //查询球队的名称和logo并回显到页面上
        queryAndShowInfo(teamId);
        myUploadLogo(teamId,pageNum,pageSize);
    });

    function myUploadLogo(teamId,pageNum,pageSize) {
        //使用js把文件域转换成fileinput对象
         $("#logo").fileinput({
             uploadUrl:"/Admin/carNameLogo/"+teamId, //接受请求地址
             uploadAsync : true, //默认异步上传
             showUpload : true, //是否显示上传按钮,跟随文本框的那个
             showRemove : true, //显示移除按钮,跟随文本框的那个
             showCaption : true,//是否显示标题,就是那个文本框
             showPreview : true, //是否显示预览,不写默认为true
             dropZoneEnabled : false,//是否显示拖拽区域，默认不写为true，但是会占用很大区域
             //minImageWidth: 50, //图片的最小宽度
             //minImageHeight: 50,//图片的最小高度
             //maxImageWidth: 1000,//图片的最大宽度
             //maxImageHeight: 1000,//图片的最大高度
             //maxFileSize: 0,//单位为kb，如果为0表示不限制文件大小
             //minFileCount: 0,
             maxFileCount : 1, //表示允许同时上传的最大文件个数
             enctype : 'multipart/form-data',
             validateInitialCount : true,
            /* previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",*/
             msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            allowedFileTypes : [ 'image' ],//配置允许文件上传的类型
             allowedPreviewTypes : [ 'image' ],//配置所有的被预览文件类型
           // allowedPreviewMimeTypes : ['image/jpeg','image/jpg'],//控制被预览的所有mime类型
             language : 'zh'
         });
        //异步上传返回结果处理
        $('#logo').on('fileerror', function(event, data, msg) {
            alert("上传失败！"+msg);
        });
        //异步上传返回结果处理
        $("#logo").on("fileuploaded", function(event, data, previewId, index) {
            let ref = $(this).attr("data-ref");
            $("input[name='" + ref + "']").val(data.response.url);
            //上传成功
            window.location.href = "autoList.html";
        });
    }


</script>